<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站轮播图样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 16px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0 0 16px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .section-title .more {
      font-size: 14px;
      font-weight: normal;
      color: #4263EB;
      text-decoration: none;
    }
    
    /* 轮播图基础样式 */
    .carousel-wrapper {
      position: relative;
      margin-bottom: 32px;
      border-radius: 12px;
      overflow: hidden;
    }
    
    .carousel {
      position: relative;
    }
    
    .carousel-inner {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    .carousel-item {
      position: relative;
      display: none;
      width: 100%;
      transition: transform 0.6s ease;
      backface-visibility: hidden;
    }
    
    .carousel-item.active {
      display: block;
    }
    
    .carousel-img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .carousel-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px;
      color: white;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
    }
    
    .carousel-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .carousel-text {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 0;
    }
    
    /* 指示器样式 */
    .carousel-indicators {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index: 10;
    }
    
    .carousel-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.5);
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .carousel-indicator.active {
      background-color: white;
      width: 24px;
      border-radius: 4px;
    }
    
    /* 控制按钮 */
    .carousel-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(0,0,0,0.3);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      z-index: 10;
    }
    
    .carousel-control.prev {
      left: 12px;
    }
    
    .carousel-control.next {
      right: 12px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 各风格特定样式 */
    /* 1. 标准大图式 */
    #style1 .carousel-item {
      height: 240px;
    }
    
    #style1 .carousel-img {
      height: 100%;
      object-fit: cover;
    }
    
    /* 2. 卡片式轮播 */
    #style2 .carousel-inner {
      padding: 16px 0;
    }
    
    #style2 .carousel-item {
      margin-right: 12px;
      width: calc(70% - 12px);
      display: block;
      float: left;
      transition: transform 0.6s ease;
    }
    
    #style2 .carousel-item.active + .carousel-item {
      transform: translateX(10%);
    }
    
    #style2 .carousel-item.active {
      z-index: 2;
      transform: scale(1.05);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    
    #style2 .carousel-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    #style2 .carousel-img {
      height: 140px;
      object-fit: cover;
    }
    
    #style2 .carousel-content {
      padding: 12px;
    }
    
    #style2 .carousel-title {
      font-size: 16px;
      color: #333;
      margin-bottom: 4px;
    }
    
    #style2 .carousel-meta {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    #style2 .carousel-indicators {
      bottom: 0;
    }
    
    /* 3. 全屏沉浸式 */
    #style3 {
      padding: 0;
    }
    
    #style3 .carousel-wrapper {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    #style3 .carousel-item {
      height: 100vh;
    }
    
    #style3 .carousel-img {
      height: 100%;
      object-fit: cover;
    }
    
    #style3 .carousel-caption {
      padding: 24px;
      text-align: center;
    }
    
    #style3 .carousel-title {
      font-size: 24px;
      margin-bottom: 12px;
    }
    
    #style3 .carousel-text {
      font-size: 16px;
      max-width: 80%;
      margin: 0 auto 24px;
    }
    
    #style3 .carousel-action {
      display: inline-block;
      padding: 10px 24px;
      background-color: white;
      color: #333;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 500;
      font-size: 16px;
    }
    
    #style3 .close-fullscreen {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(0,0,0,0.3);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    
    /* 4. 故事式轮播 */
    #style4 .carousel {
      padding: 8px 0;
    }
    
    #style4 .carousel-item {
      width: 80px;
      margin-right: 16px;
      display: block;
      float: left;
    }
    
    #style4 .story-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    #style4 .story-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #4263EB;
      padding: 2px;
      margin-bottom: 8px;
    }
    
    #style4 .story-avatar.add {
      background-color: #f0f5ff;
      border-color: #f0f5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4263EB;
      font-size: 24px;
    }
    
    #style4 .story-name {
      font-size: 12px;
      color: #333;
      white-space: nowrap;
    }
    
    #style4 .carousel-control {
      top: 30%;
    }
    
    #style4 .carousel-indicators {
      display: none;
    }
    
    /* 5. 深色模式 */
    #style5 {
      background-color: #121212;
    }
    
    #style5 .section-title {
      color: white;
    }
    
    #style5 .section-title .more {
      color: #58a9ff;
    }
    
    #style5 .carousel-wrapper {
      background-color: #1e1e1e;
    }
    
    #style5 .carousel-item {
      height: 240px;
    }
    
    #style5 .carousel-img {
      height: 100%;
      object-fit: cover;
    }
    
    #style5 .carousel-control {
      background-color: rgba(255,255,255,0.1);
    }
    
    #style5 .carousel-indicator {
      background-color: rgba(255,255,255,0.3);
    }
    
    #style5 .carousel-indicator.active {
      background-color: #4263EB;
    }
    
    /* 6. 视频卡片式 */
    #style6 .carousel-item {
      margin-right: 16px;
      width: calc(50% - 16px);
      display: block;
      float: left;
    }
    
    #style6 .video-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      position: relative;
    }
    
    #style6 .carousel-img {
      height: 140px;
      object-fit: cover;
    }
    
    #style6 .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(0,0,0,0.5);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    #style6 .video-duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(0,0,0,0.7);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    
    #style6 .video-info {
      padding: 12px;
    }
    
    #style6 .video-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    #style6 .video-stats {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    #style6 .carousel-indicators {
      display: none;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">标准大图</button>
    <button class="style-btn" data-style="style2">卡片式</button>
    <button class="style-btn" data-style="style3">全屏式</button>
    <button class="style-btn" data-style="style4">故事式</button>
    <button class="style-btn" data-style="style5">深色模式</button>
    <button class="style-btn" data-style="style6">视频卡片</button>
  </div>
  
  <!-- 1. 标准大图式轮播 -->
  <div id="style1" class="carousel-style active">
    <div class="container">
      <h2 class="section-title">
        精选内容
        <a href="#" class="more">查看全部</a>
      </h2>
      
      <div class="carousel-wrapper">
        <div class="carousel" id="carousel1">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/800/500?random=1" alt="轮播图片1" class="carousel-img">
              <div class="carousel-caption">
                <h3 class="carousel-title">城市摄影大赛获奖作品</h3>
                <p class="carousel-text">探索城市中的光影变幻，捕捉都市生活的精彩瞬间</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/800/500?random=2" alt="轮播图片2" class="carousel-img">
              <div class="carousel-caption">
                <h3 class="carousel-title">周末旅行目的地推荐</h3>
                <p class="carousel-text">远离城市喧嚣，这些小众景点值得一去</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/800/500?random=3" alt="轮播图片3" class="carousel-img">
              <div class="carousel-caption">
                <h3 class="carousel-title">夏日美食节即将开幕</h3>
                <p class="carousel-text">汇集各地特色美食，一场味蕾的盛宴等你来</p>
              </div>
            </div>
          </div>
          
          <ul class="carousel-indicators">
            <li class="carousel-indicator active" data-index="0"></li>
            <li class="carousel-indicator" data-index="1"></li>
            <li class="carousel-indicator" data-index="2"></li>
          </ul>
          
          <button class="carousel-control prev" data-action="prev">
            <i class="fa fa-angle-left"></i>
          </button>
          <button class="carousel-control next" data-action="next">
            <i class="fa fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 2. 卡片式轮播 -->
  <div id="style2" class="carousel-style">
    <div class="container">
      <h2 class="section-title">
        热门推荐
        <a href="#" class="more">更多</a>
      </h2>
      
      <div class="carousel-wrapper">
        <div class="carousel" id="carousel2">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="carousel-card">
                <img src="https://picsum.photos/600/400?random=4" alt="卡片图片1" class="carousel-img">
                <div class="carousel-content">
                  <h3 class="carousel-title">创意设计工作坊</h3>
                  <div class="carousel-meta">
                    <span><i class="fa fa-user-o"></i> 设计学院</span>
                    <span><i class="fa fa-heart-o"></i> 2.3k</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="carousel-card">
                <img src="https://picsum.photos/600/400?random=5" alt="卡片图片2" class="carousel-img">
                <div class="carousel-content">
                  <h3 class="carousel-title">前端开发实战指南</h3>
                  <div class="carousel-meta">
                    <span><i class="fa fa-user-o"></i> 技术社区</span>
                    <span><i class="fa fa-heart-o"></i> 1.8k</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="carousel-card">
                <img src="https://picsum.photos/600/400?random=6" alt="卡片图片3" class="carousel-img">
                <div class="carousel-content">
                  <h3 class="carousel-title">美食摄影技巧分享</h3>
                  <div class="carousel-meta">
                    <span><i class="fa fa-user-o"></i> 美食达人</span>
                    <span><i class="fa fa-heart-o"></i> 3.5k</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="carousel-card">
                <img src="https://picsum.photos/600/400?random=7" alt="卡片图片4" class="carousel-img">
                <div class="carousel-content">
                  <h3 class="carousel-title">旅行vlog剪辑教程</h3>
                  <div class="carousel-meta">
                    <span><i class="fa fa-user-o"></i> 旅行博主</span>
                    <span><i class="fa fa-heart-o"></i> 2.7k</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <ul class="carousel-indicators">
            <li class="carousel-indicator active" data-index="0"></li>
            <li class="carousel-indicator" data-index="1"></li>
            <li class="carousel-indicator" data-index="2"></li>
            <li class="carousel-indicator" data-index="3"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 3. 全屏沉浸式轮播 -->
  <div id="style3" class="carousel-style">
    <div class="carousel-wrapper">
      <button class="close-fullscreen" id="closeFullscreen">
        <i class="fa fa-times"></i>
      </button>
      
      <div class="carousel" id="carousel3">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://picsum.photos/1200/1920?random=8" alt="全屏图片1" class="carousel-img">
            <div class="carousel-caption">
              <h3 class="carousel-title">年度摄影展</h3>
              <p class="carousel-text">探索光影的艺术，感受摄影的魅力</p>
              <a href="#" class="carousel-action">立即查看</a>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/1200/1920?random=9" alt="全屏图片2" class="carousel-img">
            <div class="carousel-caption">
              <h3 class="carousel-title">夏季音乐节</h3>
              <p class="carousel-text">一场视听盛宴，与音乐共舞一夏</p>
              <a href="#" class="carousel-action">购票通道</a>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/1200/1920?random=10" alt="全屏图片3" class="carousel-img">
            <div class="carousel-caption">
              <h3 class="carousel-title">创意设计周</h3>
              <p class="carousel-text">汇聚全球创意，引领设计潮流</p>
              <a href="#" class="carousel-action">了解详情</a>
            </div>
          </div>
        </div>
        
        <ul class="carousel-indicators">
          <li class="carousel-indicator active" data-index="0"></li>
          <li class="carousel-indicator" data-index="1"></li>
          <li class="carousel-indicator" data-index="2"></li>
        </ul>
        
        <button class="carousel-control prev" data-action="prev">
          <i class="fa fa-angle-left"></i>
        </button>
        <button class="carousel-control next" data-action="next">
          <i class="fa fa-angle-right"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 4. 故事式轮播 -->
  <div id="style4" class="carousel-style">
    <div class="container">
      <h2 class="section-title">
        好友故事
        <a href="#" class="more">查看全部</a>
      </h2>
      
      <div class="carousel-wrapper">
        <div class="carousel" id="carousel4">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="story-item">
                <div class="story-avatar add">
                  <i class="fa fa-plus"></i>
                </div>
                <span class="story-name">添加故事</span>
              </div>
            </div>
            <div class="carousel-item">
              <div class="story-item">
                <img src="https://picsum.photos/200/200?random=11" alt="用户1" class="story-avatar">
                <span class="story-name">张小明</span>
              </div>
            </div>
            <div class="carousel-item">
              <div class="story-item">
                <img src="https://picsum.photos/200/200?random=12" alt="用户2" class="story-avatar">
                <span class="story-name">李华</span>
              </div>
            </div>
            <div class="carousel-item">
              <div class="story-item">
                <img src="https://picsum.photos/200/200?random=13" alt="用户3" class="story-avatar">
                <span class="story-name">王芳</span>
              </div>
            </div>
            <div class="carousel-item">
              <div class="story-item">
                <img src="https://picsum.photos/200/200?random=14" alt="用户4" class="story-avatar">
                <span class="story-name">赵伟</span>
              </div>
            </div>
            <div class="carousel-item">
              <div class="story-item">
                <img src="https://picsum.photos/200/200?random=15" alt="用户5" class="story-avatar">
                <span class="story-name">陈静</span>
              </div>
            </div>
          </div>
          
          <button class="carousel-control prev" data-action="prev">
            <i class="fa fa-angle-left"></i>
          </button>
          <button class="carousel-control next" data-action="next">
            <i class="fa fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 5. 深色模式轮播 -->
  <div id="style5" class="carousel-style">
    <div class="container">
      <h2 class="section-title">
        夜间精选
        <a href="#" class="more">查看全部</a>
      </h2>
      
      <div class="carousel-wrapper">
        <div class="carousel" id="carousel5">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/800/500?random=16" alt="深色图片1" class="carousel-img">
              <div class="carousel-caption">
                <h3 class="carousel-title">星空摄影指南</h3>
                <p class="carousel-text">如何捕捉夜空中最亮的星</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/800/500?random=17" alt="深色图片2" class="carousel-img">
              <div class="carousel-caption">
                <h3 class="carousel-title">夜间城市风光</h3>
                <p class="carousel-text">华灯初上，城市的另一面魅力</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/800/500?random=18" alt="深色图片3" class="carousel-img">
              <div class="carousel-caption">
                <h3 class="carousel-title">深夜读书俱乐部</h3>
                <p class="carousel-text">适合夜晚阅读的5本好书推荐</p>
              </div>
            </div>
          </div>
          
          <ul class="carousel-indicators">
            <li class="carousel-indicator active" data-index="0"></li>
            <li class="carousel-indicator" data-index="1"></li>
            <li class="carousel-indicator" data-index="2"></li>
          </ul>
          
          <button class="carousel-control prev" data-action="prev">
            <i class="fa fa-angle-left"></i>
          </button>
          <button class="carousel-control next" data-action="next">
            <i class="fa fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 6. 视频卡片式轮播 -->
  <div id="style6" class="carousel-style">
    <div class="container">
      <h2 class="section-title">
        热门视频
        <a href="#" class="more">更多</a>
      </h2>
      
      <div class="carousel-wrapper">
        <div class="carousel" id="carousel6">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="video-card">
                <img src="https://picsum.photos/600/400?random=19" alt="视频封面1" class="carousel-img">
                <div class="play-icon">
                  <i class="fa fa-play"></i>
                </div>
                <div class="video-duration">03:45</div>
                <div class="video-info">
                  <h3 class="video-title">城市延时摄影：一天24小时的光影变化</h3>
                  <div class="video-stats">
                    <span><i class="fa fa-eye"></i> 12.5k</span>
                    <span><i class="fa fa-heart-o"></i> 843</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="video-card">
                <img src="https://picsum.photos/600/400?random=20" alt="视频封面2" class="carousel-img">
                <div class="play-icon">
                  <i class="fa fa-play"></i>
                </div>
                <div class="video-duration">07:12</div>
                <div class="video-info">
                  <h3 class="video-title">创意vlog拍摄技巧，让你的视频更有质感</h3>
                  <div class="video-stats">
                    <span><i class="fa fa-eye"></i> 8.3k</span>
                    <span><i class="fa fa-heart-o"></i> 567</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="video-card">
                <img src="https://picsum.photos/600/400?random=21" alt="视频封面3" class="carousel-img">
                <div class="play-icon">
                  <i class="fa fa-play"></i>
                </div>
                <div class="video-duration">05:30</div>
                <div class="video-info">
                  <h3 class="video-title">旅行vlog：探索隐秘的山间小屋</h3>
                  <div class="video-stats">
                    <span><i class="fa fa-eye"></i> 15.2k</span>
                    <span><i class="fa fa-heart-o"></i> 1.2k</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="video-card">
                <img src="https://picsum.photos/600/400?random=22" alt="视频封面4" class="carousel-img">
                <div class="play-icon">
                  <i class="fa fa-play"></i>
                </div>
                <div class="video-duration">10:24</div>
                <div class="video-info">
                  <h3 class="video-title">美食制作：在家也能做的米其林级甜点</h3>
                  <div class="video-stats">
                    <span><i class="fa fa-eye"></i> 23.7k</span>
                    <span><i class="fa fa-heart-o"></i> 2.1k</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <button class="carousel-control prev" data-action="prev">
            <i class="fa fa-angle-left"></i>
          </button>
          <button class="carousel-control next" data-action="next">
            <i class="fa fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 轮播图功能实现
    function initCarousel(carouselId) {
      const carousel = document.getElementById(carouselId);
      if (!carousel) return;
      
      const items = carousel.querySelectorAll('.carousel-item');
      const indicators = carousel.querySelectorAll('.carousel-indicator');
      const prevBtn = carousel.querySelector('.carousel-control.prev');
      const nextBtn = carousel.querySelector('.carousel-control.next');
      let currentIndex = 0;
      let interval;
      
      // 设置当前激活项
      function setActiveIndex(index) {
        // 移除所有激活状态
        items.forEach(item => item.classList.remove('active'));
        indicators.forEach(indicator => indicator.classList.remove('active'));
        
        // 设置新的激活项
        currentIndex = index;
        items[currentIndex].classList.add('active');
        if (indicators.length) {
          indicators[currentIndex].classList.add('active');
        }
      }
      
      // 下一张
      function nextSlide() {
        let newIndex = currentIndex + 1;
        if (newIndex >= items.length) {
          newIndex = 0;
        }
        setActiveIndex(newIndex);
      }
      
      // 上一张
      function prevSlide() {
        let newIndex = currentIndex - 1;
        if (newIndex < 0) {
          newIndex = items.length - 1;
        }
        setActiveIndex(newIndex);
      }
      
      // 自动播放
      function startAutoplay() {
        interval = setInterval(nextSlide, 5000);
      }
      
      // 停止自动播放
      function stopAutoplay() {
        clearInterval(interval);
      }
      
      // 事件监听
      if (prevBtn) {
        prevBtn.addEventListener('click', () => {
          stopAutoplay();
          prevSlide();
          startAutoplay();
        });
      }
      
      if (nextBtn) {
        nextBtn.addEventListener('click', () => {
          stopAutoplay();
          nextSlide();
          startAutoplay();
        });
      }
      
      // 指示器点击
      indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
          stopAutoplay();
          setActiveIndex(index);
          startAutoplay();
        });
      });
      
      // 鼠标悬停暂停自动播放
      carousel.addEventListener('mouseenter', stopAutoplay);
      carousel.addEventListener('mouseleave', startAutoplay);
      
      // 开始自动播放
      startAutoplay();
    }
    
    // 初始化所有轮播图
    initCarousel('carousel1');
    initCarousel('carousel2');
    initCarousel('carousel3');
    initCarousel('carousel4');
    initCarousel('carousel5');
    initCarousel('carousel6');
    
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.carousel-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'block';
      });
    });
    
    // 全屏轮播关闭按钮
    document.getElementById('closeFullscreen').addEventListener('click', function() {
      document.querySelectorAll('.style-btn')[0].click();
    });
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.carousel-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'block';
      }
    });
  </script>
</body>
</html>

